<template>
    <div class="userManagementContainer">

        <!--头部面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>平台管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!--查询卡片-->
        <el-card class="box-card ">
            <el-form ref="queryFormRef" :inline="true" :model="queryUserListForm" class="queryTestplanForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="queryUserListForm.name" placeholder="输入用户名" clearable></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="queryUserListForm.email" placeholder="输入用户邮箱" clearable></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="queryUserListForm.role" filterable placeholder="输入用户邮箱">
                        <el-option
                                v-for="role in roleList"
                                :key="role.id"
                                :label="role.name"
                                :value="role.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getUserList()">查询</el-button>
                    <el-button type="info" icon="el-icon-search" @click="resetQueryForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--表格-->
        <el-card class="box-card">
            <el-button type="primary" icon="el-icon-circle-plus" @click="newTestplanDialogVisible = true">
                新增
            </el-button>
            <!--            <el-button @click="showNewTestcaseFormModel">show newTestcaseFormModel</el-button>-->
            <!--            <el-button @click="showEditTestcaseFormModel">show editTestcaseFormModel</el-button>-->
            <el-table
                    :data="userList"
                    border
                    style="width: 100%"
                    :header-cell-style="headerCellstyle"
                    stripe>

                <el-table-column
                        type="index"
                        label="序号"
                        width="60px">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="roleName"
                        label="角色"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="130">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle
                                   @click="editTestcase(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="deleteATestcase(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页 暂时先不看-->
        <el-pagination

                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "UserManagement",
        created() {
            this.getUserList();
        },
        data(){
            return {
                queryUserListForm:{
                    name:'',
                    email:'',
                    role:'',

                },
                roleList:{},

                /*当前页*/
                currentPage:1,
                /*每页条数*/
                pageSize:10,
                /*总条数*/
                totalSize:0,

                userList:{},

                headerCellstyle:{},
            }
        },
        methods:{
            /*获取用户列表*/
            async getUserList(){
                const {data:res} = await this.$http.post('user/getUsers?pageSize=' + this.pageSize + '&currentPage=' +
                    this.currentPage, this.queryUserListForm);

                if(res.status !== 200) return this.$message.error("获取用户列表失败！");

                this.totalSize = res.total;
                this.userList = res.data;
            },
            /*重置查询表单*/
            resetQueryForm(){
                this.$refs.queryFormRef.resetFields();
            },
            /*handleSizeChange*/
            handleSizeChange(newSize){
                this.pageSize = newSize;
                this.getUserList();
            },

            handleCurrentChange(val) {
                this.currentPage = val;
                this.getUserList();
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-card {
        margin-bottom: 20px;
    }
</style>